<template>
  <div id="teamPerformance">
    <c-title :hide="false" text="我的订单"></c-title>

    <div class="content">
      <ul class='rationList'>
        <li v-for="(elem,i) in recordsList" :key='i'>
          <div class="detail" @click="memberShow(i)">
            <div class="header">
              <p class="month"><span>订单编号</span><span class="order_number">{{elem.order_sn}}</span></p>
              <p class="month"><span>订单金额</span><span class="number">{{elem.price}}</span></p>
              <p class="month"><span>商品数量</span><span class="number">{{elem.goods_total}}</span></p>
            </div>
            <div class="list_box">
              <div class="list" v-for="(item,i) in elem.has_many_order_goods" :key='i'>
                <div class="info">
                  <img :src="item.thumb" alt="商品图片">
                  <span>{{item.title}}</span>
                </div>
                <div class="number_List">
                  <div class="lis" >
                    <div class="top">￥{{ item.price }}</div>
                    <div class="txt">现价</div>
                  </div>
                  <div class="lis" >
                    <div class="top">￥{{ item.payment_amount  }}</div>
                    <div class="txt">实付</div>
                  </div>
                  <div class="lis" >
                    <div class="top">{{ item.total }}</div>
                    <div class="txt">数量</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div v-show="is_show_member === i  " class="member-show">
               <div><img :src="elem.belongs_to_member&&elem.belongs_to_member.avatar||''" alt="" style="width:3rem;height:3rem"></div>
               <div class="member-info">
                   <div class="name">{{elem.belongs_to_member&&elem.belongs_to_member.username||''}}</div>
                   <div class="vx">微信号:{{elem.belongs_to_member&&elem.belongs_to_member.yz_member.wechat||'暂无微信号'}}</div>
               </div>
            </div> -->
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import cTitle from 'components/title';
import { Toast } from 'vant';
import {scrollMixin} from 'utils/mixin';
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      recordsList: [],
      is_show_member:null,//是否展示会员信息面板
      is_show_team_buyer:false,

      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.initData();
    this.getData();
  },
  methods: {
    memberShow(i){
      if(this.is_show_member == i){
        this.is_show_member = null;
      }else{
        this.is_show_member =i;
      }
    },
    initData() {
      this.recordsList = [];
      this.is_show_team_buyer =false;
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    getData(page=1) {
      $http.get('order.list', {page}, "...").then(({result,data}) => {
        if (result === 1) {
          console.log(data,"data=====");
          this.isLoadMore = true;
          this.page = data.current_page;
          this.total_page = data.last_page;
          page==1?(this.recordsList = data.data):(this.recordsList = this.recordsList.concat(data.data));
        } else {
          Toast(response.msg);
        }
      }).catch(error => {
        console.log(error);
      });
    },
    //获取更多数据
    getMoreData() {
      this.isLoadMore = false;  // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      };
      let page = this.page + 1;
      this.getData(page)
    },
  },
  components: {cTitle}
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  #teamPerformance {
    .rationList {
      padding: 0;
      margin: 0;

      li {
        margin-bottom: 0.5rem;

        .detail {
          background: #fff;
          .member-show{
                border-top: 0.0625rem solid #ebebeb;
                padding: 0.5rem 1rem;
                display: flex;
                align-items: center;
                .member-info{
                      text-align: left;
                      margin-left: 0.5rem;
                      font-size: 14px;
                }
          }
        }

        .header {
          display: flex;
          padding: 0.625rem 0;
          border-bottom: 0.0625rem solid #ebebeb;

          p {
            flex: 1;
            display: flex;
            flex-direction: column;

            span:first-child {
              color: #8c8c8c;
            }

            span {
              line-height: 1.75rem;
            }

            .number {
              font-size: 16px;
            }

            .order_number {
              padding: 0 8px;
              font-size: 12px;
            }
          }
        }

        .list_box {
          padding: 0 0.625rem;
        }

        .list {
          font-size: 18px;
          padding-bottom: 0.5rem;
        }

        .info {
          flex: 1;
          display: flex;
          // align-items: center;
          padding: 0.5rem 0;
          background: #fff;
          font-size: 14px;

          img {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 4px;
            margin: 0 0.5rem 0 0;
          }

          span {
            flex: 1;
            text-align: left;
          }
        }
      }
    }

    ::v-deep .van-tabs__line {
      z-index: 0;
    }
  }
.number_List {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem;
  background: #f3f3f3;
  border-radius: 0.375rem;
  flex-wrap: wrap;
  .lis {
    flex: 1;
    margin: 0;
    min-width: 33%;
    .top {
      font-size: 0.88rem;
      color: #3b3b4a;
      font-weight: bold;
    }
    .txt {
      color: #aaaab3;
      font-size: 0.75rem;
    }
  }
  .lis_right {
    border-right: 1px solid #e7e7e7;
  }
  .lis:last-child {
    border-right: 0;
  }
}
</style>